"use client"
import React, { useState } from "react"
import { SettingsIcon, Globe, Shield, Bell, Key } from "lucide-react"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import GeneralSetting from "./components/GeneralSetting"
import SecuritySetting from "./components/SecuritySetting"
import NotificationSetting from "./components/NotificationSetting"
import ApiKeySetting from "./components/ApiKeySetting"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const settings = [
  {
    id: "general",
    title: "通用设置",
    icon: Globe
  },
  {
    id: "security",
    title: "安全设置",
    icon: Shield
  },
  {
    id: "notifications",
    title: "通知设置",
    icon: Bell
  },
  {
    id: "api",
    title: "API密钥",
    icon: Key
  }
]

/**
 * 系统管理页面
 */
const SettingsPage = () => {
  const [activeTab, setActiveTab] = useState("general")

  /** 渲染内容 */
  const renderContent = () => {
    switch (activeTab) {
      case "general":
        return <GeneralSetting />
      case "security":
        return <SecuritySetting />
      case "notifications":
        return <NotificationSetting />
      case "api":
        return <ApiKeySetting />
      default:
        return <GeneralSetting />
    }
  }

  return (
    <div>
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-text-primary mb-2">系统设置</h2>
        <p className="text-text-secondary">配置系统参数和偏好设置</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div className="lg:col-span-1">
          <Card className="dark:bg-gray-800">
            <CardHeader>
              <CardTitle className="flex items-center">
                <SettingsIcon className="mr-2 h-5 w-5" />
                设置导航
              </CardTitle>
            </CardHeader>
            <CardContent>
              <nav className="space-y-1">
                {settings.map((item) => (
                  <Button
                    key={item.id}
                    variant="ghost"
                    className={cn(
                      "w-full justify-start",
                      activeTab === item.id ? "bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-300" : ""
                    )}
                    onClick={() => setActiveTab(item.id)}
                  >
                    <item.icon className="mr-2 h-4 w-4" />
                    {item.title}
                  </Button>
                ))}
              </nav>
            </CardContent>
          </Card>
        </div>
        <div className="lg:col-span-3">{renderContent()}</div>
      </div>
    </div>
  )
}

export default SettingsPage
